<template>
    <div class="prop-data-form-define">
        <!--<template v-if="item.module_type === 'filter'">
            <c-filter-data :item="item" :pages="pages" :current-page-items="currentPageItems"></c-filter-data>
        </template>-->
        <builder-vars v-model="item.vars" :dialog="true" :is-item="true" trigger-page-type="pageItem"
                      :item="item" :page="page" label="模块变量" v-bind="$attrs"></builder-vars>
        <!--<template v-if="item && item.data_fieldsmap">
            <h5>页面变量绑定（双向）</h5>
            <el-form label-width="50px" size="mini" v-if="item.data_fieldsmap" class="data-form-merge" style="padding: 0px 10px 10px 0px;">
                <el-form-item label="组件值" style="margin-bottom: 0px;">
                    <data-tree-node-select v-model="item.data_fieldsmap._modelVar" v-bind="$attrs" :item="item"
                                           :page="page" nv-type="var" placeholder="组件数据绑定的变量 v-model"></data-tree-node-select>
                </el-form-item>
                <el-form-item label="总数量" style="margin-bottom: 0px;">
                    <data-tree-node-select v-model="item.data_fieldsmap._pageTotalVar" v-bind="$attrs" :item="item"
                                           :page="page" nv-type="var" placeholder="数据总数绑定的变量 total"></data-tree-node-select>
                </el-form-item>
                <el-form-item label="当前页" style="margin-bottom: 0px;">
                    <data-tree-node-select v-model="item.data_fieldsmap._pageVar" v-bind="$attrs" :item="item"
                                           :page="page" nv-type="var" placeholder="数据页码绑定的变量 page"></data-tree-node-select>
                </el-form-item>
                <el-form-item label="每页数" style="margin-bottom: 0px;">
                    <data-tree-node-select v-model="item.data_fieldsmap._pageSizeVar" v-bind="$attrs" :item="item"
                                           :page="page" nv-type="var" placeholder="数据分页数绑定的变量 pageSize"></data-tree-node-select>
                </el-form-item>
            </el-form>
        </template>-->
        <!--<template v-if="canSetData">
            <h5>数据源定义</h5>
            <div style="text-align: center;margin-bottom: 10px;">
                <el-radio-group v-model="item.data_type" size="mini">
                    <el-radio-button label="static">静态数据</el-radio-button>
                    <el-radio-button label="pageVar">页面变量</el-radio-button>
                    <el-radio-button label="iVar">组件变量</el-radio-button>
                    <el-radio-button label="iQuery">组件入参</el-radio-button>
                    <el-radio-button label="dync">动态数据</el-radio-button>
                    <el-radio-button label="microapi">微接口</el-radio-button>
                </el-radio-group>
            </div>

            <div style="flex: 1;overflow-y: auto">
                <template v-if="item.data_type === 'static'">
                    <xspreadsheet v-if="isChart || 'jzlDataList' == item.component"
                                  v-model="item.data_static.source"
                                  :width="390" :height="200" ref="xsheet"></xspreadsheet>
                    <v-jsoneditor v-else v-model="item.data_static" height="180px" class="json-editor-mini" style="margin-bottom: 10px;"
                                  :options="{ search: false, statusBar: false }"></v-jsoneditor>
                </template>
                <template v-else-if="(isApi || isMApi) && isChart">
                    <el-form ref="form" label-width="80px" size="mini" style="background: #FCFCFC;padding: 0px 0px 5px;border-radius: 2px;">
                        <el-form-item label="数据源">
                            <el-tag v-if="reportDefine && reportDefine.reportdef_id" size="medium" style="margin-right: 10px;">
                                {{reportDefine.title}}
                            </el-tag>
                            <el-button size="mini" @click="showReportWin()" :disabled="item.module_type == 'filter'">选择报表</el-button>
                        </el-form-item>
                    </el-form>
                </template>
                <template v-else-if="isApi || isMApi">
                    <el-form ref="form" label-width="10px" size="mini" style="background: #FAFAFA;padding: 0px 10px 5px 0px;border-radius: 2px;">
                        <el-form-item label="" v-if="isMApi" style="text-align: center;margin-bottom: 6px;">
                            <el-tag v-if="api && api.api_uuid" size="medium" style="margin-right: 10px;">
                                {{api.api_name}}
                            </el-tag>
                            <el-button type="primary" plain @click="showApiWin()" :disabled="item.module_type == 'filter'">选择微接口</el-button>
                        </el-form-item>
                        <el-form-item label="" v-else style="text-align: center;margin-bottom: 6px;">
                            <el-tag v-if="form && form.form_id" size="medium" style="margin-right: 10px;">
                                {{form.form_name}}
                                <template v-if="form.view_name">
                                    <i class="el-icon-arrow-left"></i>{{ form.view_name }}
                                    <i class="el-icon-arrow-right"></i>
                                </template>
                            </el-tag>
                            <el-button type="primary" plain @click="showSourceWin()" :disabled="item.module_type == 'filter'">选择表单数据</el-button>
                        </el-form-item>
                        <el-form-item>
                            <link-query v-if="item.data_dync" v-model="item.data_dync.filter" :prop-form="form"></link-query>
                        </el-form-item>
                        <template>
                            <el-form-item label="数量模式" label-width="70px">
                                <el-radio-group v-model="item.data_dync.pagesize_mode">
                                    <el-radio label="fixed">定长内容</el-radio>
                                    <el-radio label="infinite">滑到底部加载更多</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="每页数量" label-width="70px">
                                <el-slider v-model="item.data_dync.pagesize" :min="3" :max="100" :step="1" show-input input-size="mini"></el-slider>
                            </el-form-item>
                        </template>
                    </el-form>
                </template>
                <template v-else-if="isPageVar">
                    <el-form v-if="page && page.vars" label-width="80px" size="mini" style="background: #FAFAFA;padding: 0px 0px 10px 0px;border-radius: 2px;">
                        <el-form-item label="页面变量"  v-if="item.data_dync">
                            <el-select v-model="item.data_dync.pageVar" clearable style="display: block;margin-right: 10px;">
                                <el-option :label="v.prop" :value="v.prop" v-for="v in page.vars"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </template>
        <div v-else class="ele-data-simple-txt-tip">
            简单类型，无需设置数据
        </div>-->
    </div>
</template>

<script type="text/javascript">
    // import { mapState, mapActions } from 'vuex';
    import BuilderVars from "../builder-vars";
    // import DataTreeNodeSelect from './data-tree-node-select';

    export default {
        props: [ 'item', 'page', 'pages', 'currentPageItems' ],
        data () {
            return {
                // form: { form_id: null, form_name: '', items: [] },
                // data: {},
                // datas: [],

                // reportDefine: {},
                // api: {},

                // adminForm: {},
                // datarules: {},
                // origRules: {},

                // nvType: "",
                // nvValue: "",
                // nvPath: ""
            }
        },
        async mounted () {
            /*this.init();
            this.loadFormData();

            let adminForm = await this.$japi.form.getFormByCode("_ADMIN");
            this.adminForm = adminForm;*/
        },
        components: {
            // DataTreeNodeSelect,
            BuilderVars
        },
        watch: {
            /*'item': {
                deep: true,
                handler() {
                    this.init();
                }
            },*/
            /*'item.page_item_code': function () {
                this.init();
                let rules = _.get(this.item, 'data_dync.filter', {});
                // console.log("***** ",this.item);
                this.origRules = _.cloneDeep(rules);
            },*/
            /*'item.data_type': function (val) {
                if(val === 'dync' || val === 'microapi') {
                    this.loadFormData();
                }
            },
            'item.data_dync': {
                deep: true,
                handler() {
                    this.loadFormData();
                }
            },*/
            /*"item.data_dync.url"(val) {
                console.log(val);
            },
            "item.data_dync.filter"(val) {
                console.log(val);
            },*/
            /*'item.data_fieldsmap'(val) {
                this.initTransform();
            },*/
            /*'currentEleData._code': function(val) {
                // this.parse2info();
                // "var:name|a.b.c"
                let _value = _.get(this.currentEleData, "_value");
                let nvType = "";
                let nvValue = "";
                let nvPath = "";

                if(_value) {
                    nvValue = _value;

                    if(_.indexOf(_value, ":") >= 0) {
                        let arrs = _value.split(":");
                        if(arrs && arrs.length > 1) {
                            nvType = _.get(arrs, '[0]');
                            nvValue = _.get(arrs, '[1]')
                        }
                    }

                    if(nvValue && _.indexOf(nvValue, '|') >= 0) {
                        let arrs = _value.split("|");
                        if(arrs && arrs.length > 1) {
                            nvValue = _.get(arrs, '[0]');
                            nvPath = _.get(arrs, '[1]')
                        }
                    }
                }

                this.nvType = nvType;
                this.nvValue = nvValue;
                this.nvPath = nvPath;
            }*/
        },
        computed: {
            /*isChart() {
                // return [ 'jzlChartBar', 'jzlChartLine', 'jzlChartPie', 'jzlChartCard', 'jzlChartTable' ].indexOf(this.item.component) >= 0;
                return this.$putils.isChartComponent(_.get(this.item, 'component'));
            },
            isApi() {
                return this.item.data_type === 'dync';
            },
            isMApi() {
                return this.item.data_type === 'microapi';
            },
            isPageVar() {
                return this.item.data_type === 'pageVar';
            },
            isStatic() {
                return this.item.data_type === 'static';
            },*/
            /*dataprops() {
                let data_schema = this.item.data_schema || {};
                let type = _.get(data_schema, 'type');
                let orig = {};
                let props = [];

                if(!type) {
                    return props;
                }

                if(type === 'array') {
                    orig = _.get(data_schema, 'items.properties');
                } else {
                    orig = _.get(data_schema, 'properties');
                }

                for(let p in orig) {
                    props.push(_.defaults({ prop: p }, orig[p]));
                }

                return props;
            },*/
            /*canSetData() {
                // return !!this.$putils.getItemAcceptDataType(this.item);
                let compName = _.get(this.item, 'component');
                return this.item && _.indexOf([ 'jzlButton', 'jzlLine' ], compName) < 0;
            },
            isListType() {
                return this.$putils.isListDataType(this.item);
            },
            isSingle() {
                return this.$putils.isObjectDataType(this.item);
            },*/
            /*apiFormItems() {
                return _.get(this.form, "items");
            },
            staticItems() {
                let dataSchema = _.get(this.item, "data_schema");
                let type = _.get(dataSchema, "type");
                let info = {};
                let items = [];

                if(type === 'array') {
                    info = _.get(dataSchema, "items.properties");
                } else {
                    info = _.get(dataSchema, "properties");
                }

                _.each(info, (it, key) => {
                    items.push({
                        value: key,
                        label: _.get(it, "title"),  //  + _.get(it, "type")
                    });
                })

                return items;
            }*/
        },
        filters: {

        },
        methods: {
            /*init() {
                let dataDync = _.get(this.item, 'data_dync');
                if(dataDync) {
                    if(!dataDync[ 'reportdef_id' ]) {
                        dataDync[ 'reportdef_id' ] = '';
                        this.$set(this.item.data_dync, 'reportdef_id', '')
                    }

                    if(!dataDync[ 'reportdef_code' ]) {
                        dataDync[ 'reportdef_code' ] = '';
                        this.$set(this.item.data_dync, 'reportdef_code', '')
                    }
                }

                let dataFieldsmap = _.get(this.item, "data_fieldsmap");
                if(!dataFieldsmap) {
                    this.item.data_fieldsmap = {  };
                }
            },*/
            /*handleTest() {
                this.$refs.xsheet.handleTest();
            },*/
            /*initExtMethod() {
                this._loadFormData = this.$utils.buffer(() => {

                }, 500);
            },*/
            /*async loadFormData() {
                this.form = null;

                if(!this.item) return;

                let dataType = _.get(this.item, 'data_type');

                if(dataType !== 'dync' && dataType !== 'microapi') return;

                let _form = _.get(this.item, '_form');
                let _reportDefine = _.get(this.item, '_reportDefine', {});
                let _api = _.get(this.item, '_api');

                // let _api2 = _.get(this.item, '_api2');
                if(dataType === 'dync') {
                    if(this.isChart) {
                        if(!_reportDefine || _reportDefine.reportdef_code !== this.item.data_dync.reportdef_code) {
                            if(this.item.data_dync.reportdef_code) {
                                _reportDefine = await this.$japi.report.getReportDefByCode(this.item.data_dync.reportdef_code);
                            } else if(this.item.data_dync.reportdef_id) {
                                _reportDefine = await this.$japi.report.getReportDef(this.item.data_dync.reportdef_id);
                            }

                            this.$set(this.item, "_reportDefine", _reportDefine);
                            this.item._reportDefine = _reportDefine;
                        }

                        this.reportDefine = _reportDefine;
                    } else {
                        if(!_form || _form.form_code !== this.item.data_dync.form_code) {
                            if(this.item.data_dync.form_code) {
                                _form = await this.$japi.form.getFormByCode(this.item.data_dync.form_code, this.item.data_dync.form_view_code);
                            } else if(this.item.data_dync.form_id) {
                                _form = await this.$japi.form.getFormById(this.item.data_dync.form_id, this.item.data_dync.form_view_id);
                            }

                            this.$set(this.item, "_form", _form);
                            this.item._form = _form;
                        }

                        this.form = _form;
                    }
                }

                if(dataType === 'microapi') {
                    if(!_api || _api.api_uuid !== this.item.data_dync.api_uuid) {
                        if(this.item.data_dync.api_uuid) {
                            _api = await this.$japi.services.getApiByUUID(this.item.data_dync.api_uuid);
                        }

                        this.$set(this.item, "_api", _api);
                        this.item._api = _api;
                    }

                    this.api = _api;
                }
            },*/
            /*isContainType(types, type) {
                return true;
            },
            initTransform() {},*/
            /*showSourceWin() {
                this.$WinForms({
                    type: 'view',
                    onSelect: async (info) => {
                        let form = _.get(info, 'form');
                        let view = _.get(info, 'view');
                        if(!form || !form.form_id) return;

                        let formId = _.get(form, 'form_id');
                        let viewId = _.get(view, 'form_view_id', -1);
                        let formCode = _.get(form, 'form_code', null);
                        let formViewCode = _.get(view, 'form_view_code', null);

                        this.item.data_dync[ 'form_id' ] = formId;
                        this.item.data_dync[ 'form_view_id' ] = viewId;
                        this.item.data_dync[ 'form_code' ] = formCode;
                        this.item.data_dync[ 'form_view_code' ] = formViewCode;

                        let fullForm = null;
                        if(formId) {
                            fullForm = await this.$japi.form.getFormById(formId, viewId);
                        } else if(formCode) {
                            fullForm = await this.$japi.form.getFormByCode(formCode, formViewCode);
                        }

                        this.form = fullForm;
                    }
                });
            },
            showReportWin() {
                this.$WinReports({
                    onSelect: async (report) => {
                        if(!report || !report.reportdef_id) return;

                        let id = _.get(report, 'reportdef_id');
                        let code = _.get(report, 'reportdef_code');

                        this.item.data_dync[ 'reportdef_id' ] = id;
                        this.item.data_dync[ 'reportdef_code' ] = code;

                        this.$set(this.item.data_dync, 'reportdef_id', id);
                        this.$set(this.item.data_dync, 'reportdef_code', code);
                        // await this.loadFormData();
                    }
                });
            },
            showApiWin() {
                this.$WinMicrosvc({
                    onSelect: async (apiInfo) => {
                        let apiUuid = _.get(apiInfo, 'api_uuid');
                        if(!apiInfo || !apiUuid) return;

                        this.$set(this.item.data_dync, 'api_uuid', apiUuid);
                        this.item.data_dync[ 'api_uuid' ] = apiUuid;
                    }
                });
            },*/
            /*handleChgNv(val1, val2) {
                // console.log("handleChgNv ----> ", val1, val2);
                let value = this.nvValue;   // `${ this.nvType }:${ this.nvValue }|${ this.nvPath }`;

                if(this.nvType) {
                    value = `${ this.nvType }:${ value }`;
                }

                if(this.nvPath) {
                    value = `${ value }|${ this.nvPath }`;
                }

                if(this.currentEleData) {
                    this.currentEleData._value = value;
                }
            },*/
            /*handleChgNvValue(val1, val2) {
                // console.log("handleChgNvValue ---> ", val1, val2)
                let value = `${ this.nvType }:${ this.nvValue }|${ this.nvPath }`;
                if(this.currentEleData) {
                    this.currentEleData._value = value;
                }
            },
            handleChgNvPath(val1, val2) {
                // console.log("handleChgNvPath ----> ", val1, val2)
                let value = `${ this.nvType }:${ this.nvValue }|${ this.nvPath }`;
                if(this.currentEleData) {
                    this.currentEleData._value = value;
                }
            }*/
        }
    }
</script>
